<template>
  <view class="page-container">
    <view class="bottom-10">
      <view class="content" v-for="(item,index) in baseList" :key="index">
        <view class="flex-row">
          <u-avatar :src="item.avatar" :size="50"/>
          <view class="flex-column">
            <view class="flex-row1">
              <text>{{ item.nickName }}</text>
              <text class="vip" v-if="item.vipIdShow">vip</text>
            </view>

            <text class="time">{{ item.createTime }}</text>
          </view>

        </view>
      </view>
    </view>

    <u-loadmore :status="status" @loadmore="loadMore"/>
  </view>
</template>
<script>
import {isEmptyArray, isEmptyString} from "@/utils/common";
import {getStorage} from "@/utils/auth";
import application from "@/static/const/application";

export default {
  data() {
    return {
      baseList: [],
      status: 'loadmore',
      params: {
        userId: 1,
        current: 1,
        size: 10
      }
    };
  },
  onLoad(options) {
    this.params.userId = getStorage(application.user).userId
    this.getList();
  },
  methods: {
    getList() {
      this.params.current = 1;
      this.$store
          .dispatch("GetSubordinate")
          .then((res) => {
            console.log(res);
            this.baseList = res.data.records;
            if (!isEmptyArray(this.baseList)) {
              this.baseList.forEach((item, index) => {
                //时间只取年月日
                item.createTime = item.createTime.substring(0, 10)
               if(isEmptyString(item.vipId)){
                  item.vipIdShow = false;
               }else{
                  item.vipIdShow = true;
               }
              })
            }

            if (isEmptyArray(this.baseList)) {
              this.status = 'empty';
            } else if (res.data.total <= this.baseList.length) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
            }
          });
    },
    toDetail(item) {
      //将item.id存入到state中
      uni.redirectTo({
        url: '/pages/invite/posterShare/index?id=' + item.id
      })
    },
    loadMore() {
      this.status = 'loading';
      this.params.current++;
      this.$store
          .dispatch("GetSubordinate", this.params)
          .then((res) => {
            console.log(res);
            let tempArr = res.data.records;
            if (!isEmptyArray(tempArr)) {
              tempArr.forEach((item, index) => {
                //时间只取年月日
                item.createTime = item.createTime.substring(0, 10)
                if(isEmptyString(item.vipId)){
                  item.vipIdShow = false;
                }else{
                  item.vipIdShow = true;
                }
              })
            }
            this.baseList = this.baseList.concat(tempArr);
            if (res.data.total <= this.baseList.length) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
            }
          });

    },
  },
};
</script>
<style scoped lang="scss">
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 5rem;

  .bottom-10 {
    margin-bottom: 2rem;
    padding-top: 1rem;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    padding: 10px;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, .1), -4px -4px 8px rgba(0, 0, 0, .1);
    margin-bottom: 1rem;

    .flex-row {


      .flex-column {
        display: flex;
        flex-direction: column;
        margin-left: 0.5rem;
        justify-content: space-between;

        .flex-row1 {
          display: flex;
          flex-direction: row;

          .vip {
            border-radius: 50px;
            border: 1px solid #e43d33;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            color: #e43d33;
            margin-left: 0.5rem;
          }
        }

        text {
          font-size: 14px;
          color: #333333;
        }

        .time {
          font-size: 10px;
          color: #999999;
        }

        .red {
          color: #e43d33;
          font-weight: bold;
        }

        .small {
          font-size: 12px;
          font-weight: normal;
        }
      }

      .flex-column-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
}
</style>
